<template>
	<view class="container">
		<view class="nav-box">
			<image class="nav-image" src="../../static/images/icons/back.svg" @click="back"></image>
			<view class="nav-title">编辑个人资料</view>
			<image class="nav-image" src=""></image>
		</view>
		<view class="card-box">
			<view class="item" @click="toEditAvatar">
				<view class="item-title">我的头像</view>
				<view class="item-info">
					<image :src="userInfo.avatarPath" mode=""></image>
					<image class="to" src="../../static/images/user/to.png"></image>
				</view>
			</view>
			<view class="item" @click="toEditNickName">
				<view class="item-title">昵称</view>
				<view class="item-info">
					<view>{{userInfo.nickname}}</view>
					<image class="to" src="../../static/images/user/to.png"></image>
				</view>
			</view>
			<view class="item"  @click="toEditSex">
				<view class="item-title">性别</view>
				<view class="item-info">
					<view>{{userInfo.sex}}</view>
					<image class="to" src="../../static/images/user/to.png"></image>
				</view>
			</view>
			<view class="item" @click="toEditAge">
				<view class="item-title">年龄</view>
				<view class="item-info">
					<view>{{userInfo.age}}</view>
					<image class="to" src="../../static/images/user/to.png"></image>
				</view>
			</view>
			<view class="item" @click="toEditMobile">
				<view class="item-title">手机</view>
				<view class="item-info">
					<view>{{userInfo.mobile}}</view>
					<image class="to" src="../../static/images/user/to.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {UserInfo} from "../../static/js/User.js"
	export default {
		data() {
			return {
				userInfo:{
					"avatarPath":"../../static/images/avatar/avatar.jpg",
					"nickname":"null",
					"sex":"保密",
					"age":1,
					"mobile":"10086"
				}
			}
		},
		onShow(){
			this.userInfo = uni.getStorageSync("userInfo")
		},
		methods: {
			back(){
				uni.navigateBack({
					url: '/pages/user/user'
				})
			},
			toEditAvatar(){
				uni.navigateTo({
					url: '/pages/user/edit/editAvatar'
				})
			},
			toEditNickName(){
				uni.navigateTo({
					url: '/pages/user/edit/editNickName'
				})
			},
			toEditSex(){
				uni.navigateTo({
					url: '/pages/user/edit/editSex'
				})
			},
			toEditAge(){
				uni.navigateTo({
					url: '/pages/user/edit/editAge'
				})
			},
			toEditMobile(){
				uni.navigateTo({
					url: '/pages/user/edit/editMobile'
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #efefef;
		overflow: hidden;
	}
	.nav-box{
		margin:100rpx 0 30rpx 0;
		display:flex;
		justify-content: space-around;
	}
	.nav-image{
		width: 80rpx;
		height: 60rpx;
		margin: 0 20rpx;
	}
	.nav-title{
		margin: auto;
		font-weight: bolder;
	}
	.card-box{
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 32rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		margin:0 40rpx;
		border-bottom: 1px solid #efefef;
	}
	.item-title{
		line-height: 100rpx;
	}
	.item-info{
		line-height: 100rpx;
		display: flex;
	}
	.item-info image{
		height: 100rpx;
		width: 100rpx;
		border-radius: 50rpx;
	}
	.item-info .to{
		margin-left: 5rpx;
		margin-top: 38rpx;
		height: 25rpx;
		width: 25rpx;
	}
</style>
